import React, { memo } from 'react'
import type { ReactNode } from 'react'
import { PaginationWrapper } from './style'
import { Pagination } from 'antd'

interface IProps {
  children?: ReactNode,

  total: number,
  onPageChange: (page: number) => void,
  currentPage: number,
}

const SongsPagination: React.FC<IProps> = (props) => {
    const { currentPage, total, onPageChange } = props;

  // render function
  function itemRender(current: number, type: string, originalElement: ReactNode) {
    if (type === 'prev') {
      return <button className="control prev"> &lt; 上一页</button>;
    }
    if (type === 'next') {
      return <button className="control next">下一页 &gt;</button>;
    }
    return originalElement;
  }
  return (
    <PaginationWrapper>
      <Pagination 
        className="pagination"
        size="default"
        align="center"
        current={currentPage}
        defaultCurrent={1}
        total={total}
        pageSize={35}
        showSizeChanger={false}
        itemRender={itemRender}
        onChange={onPageChange} />
    </PaginationWrapper>
  )
}

export default memo(SongsPagination)
